<!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>XSOL Rocket WebSocket API &#x6587;&#x6863;</title>
            <style>
/* From extension vscode.github */
/*---------------------------------------------------------------------------------------------
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the MIT License. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/

.vscode-dark img[src$=\#gh-light-mode-only],
.vscode-light img[src$=\#gh-dark-mode-only],
.vscode-high-contrast:not(.vscode-high-contrast-light) img[src$=\#gh-light-mode-only],
.vscode-high-contrast-light img[src$=\#gh-dark-mode-only] {
	display: none;
}

</style>
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css">
<link href="https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/markdown.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Microsoft/vscode/extensions/markdown-language-features/media/highlight.css">
<style>
            body {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif;
                font-size: 14px;
                line-height: 1.6;
            }
        </style>
        <style>
.task-list-item {
    list-style-type: none;
}

.task-list-item-checkbox {
    margin-left: -20px;
    vertical-align: middle;
    pointer-events: none;
}
</style>
<style>
:root {
  --color-note: #0969da;
  --color-tip: #1a7f37;
  --color-warning: #9a6700;
  --color-severe: #bc4c00;
  --color-caution: #d1242f;
  --color-important: #8250df;
}

</style>
<style>
@media (prefers-color-scheme: dark) {
  :root {
    --color-note: #2f81f7;
    --color-tip: #3fb950;
    --color-warning: #d29922;
    --color-severe: #db6d28;
    --color-caution: #f85149;
    --color-important: #a371f7;
  }
}

</style>
<style>
.markdown-alert {
  padding: 0.5rem 1rem;
  margin-bottom: 16px;
  color: inherit;
  border-left: .25em solid #888;
}

.markdown-alert>:first-child {
  margin-top: 0
}

.markdown-alert>:last-child {
  margin-bottom: 0
}

.markdown-alert .markdown-alert-title {
  display: flex;
  font-weight: 500;
  align-items: center;
  line-height: 1
}

.markdown-alert .markdown-alert-title .octicon {
  margin-right: 0.5rem;
  display: inline-block;
  overflow: visible !important;
  vertical-align: text-bottom;
  fill: currentColor;
}

.markdown-alert.markdown-alert-note {
  border-left-color: var(--color-note);
}

.markdown-alert.markdown-alert-note .markdown-alert-title {
  color: var(--color-note);
}

.markdown-alert.markdown-alert-important {
  border-left-color: var(--color-important);
}

.markdown-alert.markdown-alert-important .markdown-alert-title {
  color: var(--color-important);
}

.markdown-alert.markdown-alert-warning {
  border-left-color: var(--color-warning);
}

.markdown-alert.markdown-alert-warning .markdown-alert-title {
  color: var(--color-warning);
}

.markdown-alert.markdown-alert-tip {
  border-left-color: var(--color-tip);
}

.markdown-alert.markdown-alert-tip .markdown-alert-title {
  color: var(--color-tip);
}

.markdown-alert.markdown-alert-caution {
  border-left-color: var(--color-caution);
}

.markdown-alert.markdown-alert-caution .markdown-alert-title {
  color: var(--color-caution);
}

</style>
        
        </head>
        <body class="vscode-body vscode-light">
            <h1 id="xsol-rocket-websocket-api-文档">XSOL Rocket WebSocket API 文档</h1>
<h2 id="概述">概述</h2>
<p>XSOL Rocket WebSocket服务器提供实时控制接口，支持Vue前端调用Rocket设备进行脚部扫描、激光控制等操作。</p>
<h2 id="服务器信息">服务器信息</h2>
<ul>
<li><strong>WebSocket地址</strong>: <code>ws://localhost:8765</code></li>
<li><strong>协议</strong>: WebSocket</li>
<li><strong>消息格式</strong>: JSON</li>
<li><strong>编码</strong>: UTF-8</li>
</ul>
<h2 id="连接建立">连接建立</h2>
<h3 id="连接流程">连接流程</h3>
<ol>
<li>建立WebSocket连接</li>
<li>服务器自动发送连接确认消息</li>
<li>客户端可以开始发送请求</li>
</ol>
<h3 id="连接确认消息">连接确认消息</h3>
<pre><code class="language-json"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;connection_established&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;client_id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;uuid-string&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;message&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;连接已建立&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre>
<h2 id="消息格式">消息格式</h2>
<h3 id="请求消息格式">请求消息格式</h3>
<pre><code class="language-json"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;request&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;action_name&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;device_id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;rocket&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;message_id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;msg_timestamp&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;timestamp&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1234567890.123</span><span class="hljs-punctuation">,</span>
  <span class="hljs-comment">// 其他参数根据action类型而定</span>
<span class="hljs-punctuation">}</span>
</code></pre>
<h3 id="响应消息格式">响应消息格式</h3>
<pre><code class="language-json"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;response&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;action_name&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;success&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;data&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">&quot;exit_code&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;status_message&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;操作成功&quot;</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
<h3 id="错误消息格式">错误消息格式</h3>
<pre><code class="language-json"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;error&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;success&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">false</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;error&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;错误描述&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre>
<h2 id="api接口列表">API接口列表</h2>
<h3 id="1-获取设备列表">1. 获取设备列表</h3>
<p><strong>请求</strong>:</p>
<pre><code class="language-json"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;request&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;get_devices&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;device_id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;rocket&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;message_id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;msg_1234567890&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;timestamp&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1234567890.123</span>
<span class="hljs-punctuation">}</span>
</code></pre>
<p><strong>响应</strong>:</p>
<pre><code class="language-json"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;response&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;get_devices&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;success&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;data&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">&quot;devices&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>
      <span class="hljs-punctuation">{</span>
        <span class="hljs-attr">&quot;device_id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;rocket&quot;</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">&quot;name&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;XSOL Rocket Scanner&quot;</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;foot_scanner&quot;</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">&quot;enabled&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span><span class="hljs-punctuation">,</span>
        <span class="hljs-attr">&quot;status&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;ready&quot;</span>
      <span class="hljs-punctuation">}</span>
    <span class="hljs-punctuation">]</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
<h3 id="2-启动rocket">2. 启动Rocket</h3>
<p><strong>请求</strong>:</p>
<pre><code class="language-json"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;request&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;start_rocket&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;device_id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;rocket&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;message_id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;msg_1234567890&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;timestamp&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1234567890.123</span>
<span class="hljs-punctuation">}</span>
</code></pre>
<p><strong>响应</strong>:</p>
<pre><code class="language-json"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;response&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;start_rocket&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;success&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;data&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">&quot;exit_code&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;status_message&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;Rocket启动成功&quot;</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
<h3 id="3-扫描脚部">3. 扫描脚部</h3>
<p><strong>请求</strong>:</p>
<pre><code class="language-json"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;request&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;scan_foot&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;device_id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;rocket&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;message_id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;msg_1234567890&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;timestamp&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1234567890.123</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;side&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;left&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;first_name&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;John&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;last_name&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;Doe&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;gender&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;password&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;000000000000&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;output_file&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;scan_result.txt&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre>
<p><strong>参数说明</strong>:</p>
<ul>
<li><code>side</code>: 扫描脚部，可选值: <code>&quot;left&quot;</code>, <code>&quot;right&quot;</code></li>
<li><code>first_name</code>: 名字</li>
<li><code>last_name</code>: 姓氏</li>
<li><code>gender</code>: 性别，0=男性，1=女性</li>
<li><code>password</code>: 密码</li>
<li><code>output_file</code>: 输出文件路径（可选）</li>
</ul>
<p><strong>响应</strong>:</p>
<pre><code class="language-json"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;response&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;scan_foot&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;success&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;data&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">&quot;exit_code&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;status_message&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;脚部扫描完成&quot;</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
<h3 id="4-通过脚踏开关扫描脚部">4. 通过脚踏开关扫描脚部</h3>
<p><strong>请求</strong>:</p>
<pre><code class="language-json"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;request&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;scan_foot_by_footswitch&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;device_id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;rocket&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;message_id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;msg_1234567890&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;timestamp&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1234567890.123</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;side&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;left&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;first_name&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;John&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;last_name&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;Doe&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;gender&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;password&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;000000000000&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;output_file&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;scan_result.txt&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre>
<p><strong>响应</strong>:</p>
<pre><code class="language-json"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;response&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;scan_foot_by_footswitch&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;success&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;data&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">&quot;exit_code&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;status_message&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;脚踏开关扫描完成&quot;</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
<h3 id="5-控制激光">5. 控制激光</h3>
<p><strong>请求</strong>:</p>
<pre><code class="language-json"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;request&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;control_laser&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;device_id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;rocket&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;message_id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;msg_1234567890&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;timestamp&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1234567890.123</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;state&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1</span>
<span class="hljs-punctuation">}</span>
</code></pre>
<p><strong>参数说明</strong>:</p>
<ul>
<li><code>state</code>: 激光状态，0=关闭，1=开启</li>
</ul>
<p><strong>响应</strong>:</p>
<pre><code class="language-json"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;response&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;control_laser&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;success&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;data&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">&quot;exit_code&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;status_message&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;激光已开启&quot;</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
<h3 id="6-获取机器信息">6. 获取机器信息</h3>
<p><strong>请求</strong>:</p>
<pre><code class="language-json"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;request&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;get_machine_info&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;device_id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;rocket&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;message_id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;msg_1234567890&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;timestamp&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1234567890.123</span>
<span class="hljs-punctuation">}</span>
</code></pre>
<p><strong>响应</strong>:</p>
<pre><code class="language-json"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;response&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;get_machine_info&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;success&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;data&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">&quot;exit_code&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;status_message&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;机器序列号: XSOL-2024-001&quot;</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
<h3 id="7-保存文件">7. 保存文件</h3>
<p><strong>请求</strong>:</p>
<pre><code class="language-json"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;request&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;save_file&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;device_id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;rocket&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;message_id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;msg_1234567890&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;timestamp&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1234567890.123</span>
<span class="hljs-punctuation">}</span>
</code></pre>
<p><strong>响应</strong>:</p>
<pre><code class="language-json"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;response&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;save_file&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;success&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;data&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">&quot;exit_code&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;status_message&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;文件保存成功&quot;</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
<h3 id="8-退出rocket">8. 退出Rocket</h3>
<p><strong>请求</strong>:</p>
<pre><code class="language-json"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;request&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;exit_rocket&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;device_id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;rocket&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;message_id&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;msg_1234567890&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;timestamp&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">1234567890.123</span>
<span class="hljs-punctuation">}</span>
</code></pre>
<p><strong>响应</strong>:</p>
<pre><code class="language-json"><span class="hljs-punctuation">{</span>
  <span class="hljs-attr">&quot;type&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;response&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;exit_rocket&quot;</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;success&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span><span class="hljs-punctuation">,</span>
  <span class="hljs-attr">&quot;data&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
    <span class="hljs-attr">&quot;exit_code&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-number">0</span><span class="hljs-punctuation">,</span>
    <span class="hljs-attr">&quot;status_message&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;Rocket已退出&quot;</span>
  <span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre>
<h2 id="vuejs-使用示例">Vue.js 使用示例</h2>
<h3 id="基础连接类">基础连接类</h3>
<pre><code class="language-javascript"><span class="hljs-keyword">class</span> <span class="hljs-title class_">RocketWebSocketClient</span> {
  <span class="hljs-title function_">constructor</span>(<span class="hljs-params">url = <span class="hljs-string">&#x27;ws://localhost:8765&#x27;</span></span>) {
    <span class="hljs-variable language_">this</span>.<span class="hljs-property">url</span> = url;
    <span class="hljs-variable language_">this</span>.<span class="hljs-property">ws</span> = <span class="hljs-literal">null</span>;
    <span class="hljs-variable language_">this</span>.<span class="hljs-property">connected</span> = <span class="hljs-literal">false</span>;
    <span class="hljs-variable language_">this</span>.<span class="hljs-property">messageId</span> = <span class="hljs-number">0</span>;
    <span class="hljs-variable language_">this</span>.<span class="hljs-property">callbacks</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Map</span>();
  }

  <span class="hljs-title function_">connect</span>(<span class="hljs-params"></span>) {
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> {
      <span class="hljs-variable language_">this</span>.<span class="hljs-property">ws</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">WebSocket</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">url</span>);
      
      <span class="hljs-variable language_">this</span>.<span class="hljs-property">ws</span>.<span class="hljs-property">onopen</span> = <span class="hljs-function">() =&gt;</span> {
        <span class="hljs-variable language_">this</span>.<span class="hljs-property">connected</span> = <span class="hljs-literal">true</span>;
        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;WebSocket连接已建立&#x27;</span>);
        <span class="hljs-title function_">resolve</span>();
      };
      
      <span class="hljs-variable language_">this</span>.<span class="hljs-property">ws</span>.<span class="hljs-property">onmessage</span> = <span class="hljs-function">(<span class="hljs-params">event</span>) =&gt;</span> {
        <span class="hljs-keyword">const</span> data = <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(event.<span class="hljs-property">data</span>);
        <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">handleMessage</span>(data);
      };
      
      <span class="hljs-variable language_">this</span>.<span class="hljs-property">ws</span>.<span class="hljs-property">onclose</span> = <span class="hljs-function">() =&gt;</span> {
        <span class="hljs-variable language_">this</span>.<span class="hljs-property">connected</span> = <span class="hljs-literal">false</span>;
        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;WebSocket连接已关闭&#x27;</span>);
      };
      
      <span class="hljs-variable language_">this</span>.<span class="hljs-property">ws</span>.<span class="hljs-property">onerror</span> = <span class="hljs-function">(<span class="hljs-params">error</span>) =&gt;</span> {
        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">&#x27;WebSocket连接错误:&#x27;</span>, error);
        <span class="hljs-title function_">reject</span>(error);
      };
    });
  }

  <span class="hljs-title function_">disconnect</span>(<span class="hljs-params"></span>) {
    <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">ws</span>) {
      <span class="hljs-variable language_">this</span>.<span class="hljs-property">ws</span>.<span class="hljs-title function_">close</span>();
    }
  }

  <span class="hljs-title function_">sendMessage</span>(<span class="hljs-params">action, params = {}</span>) {
    <span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">this</span>.<span class="hljs-property">connected</span>) {
      <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">&#x27;WebSocket未连接&#x27;</span>);
    }

    <span class="hljs-keyword">const</span> messageId = <span class="hljs-string">`msg_<span class="hljs-subst">${<span class="hljs-built_in">Date</span>.now()}</span>_<span class="hljs-subst">${++<span class="hljs-variable language_">this</span>.messageId}</span>`</span>;
    <span class="hljs-keyword">const</span> message = {
      <span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;request&#x27;</span>,
      <span class="hljs-attr">action</span>: action,
      <span class="hljs-attr">device_id</span>: <span class="hljs-string">&#x27;rocket&#x27;</span>,
      <span class="hljs-attr">message_id</span>: messageId,
      <span class="hljs-attr">timestamp</span>: <span class="hljs-title class_">Date</span>.<span class="hljs-title function_">now</span>() / <span class="hljs-number">1000</span>,
      ...params
    };

    <span class="hljs-variable language_">this</span>.<span class="hljs-property">ws</span>.<span class="hljs-title function_">send</span>(<span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>(message));
    <span class="hljs-keyword">return</span> messageId;
  }

  <span class="hljs-title function_">handleMessage</span>(<span class="hljs-params">data</span>) {
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;收到消息:&#x27;</span>, data);
    
    <span class="hljs-keyword">if</span> (data.<span class="hljs-property">type</span> === <span class="hljs-string">&#x27;response&#x27;</span>) {
      <span class="hljs-comment">// 处理响应</span>
      <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">onResponse</span>(data);
    } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (data.<span class="hljs-property">type</span> === <span class="hljs-string">&#x27;error&#x27;</span>) {
      <span class="hljs-comment">// 处理错误</span>
      <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">onError</span>(data.<span class="hljs-property">error</span>);
    }
  }

  <span class="hljs-title function_">onResponse</span>(<span class="hljs-params">data</span>) {
    <span class="hljs-comment">// 可以在这里添加响应处理逻辑</span>
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;响应:&#x27;</span>, data);
  }

  <span class="hljs-title function_">onError</span>(<span class="hljs-params">error</span>) {
    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">&#x27;错误:&#x27;</span>, error);
  }

  <span class="hljs-comment">// API方法</span>
  <span class="hljs-keyword">async</span> <span class="hljs-title function_">getDevices</span>(<span class="hljs-params"></span>) {
    <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">sendMessage</span>(<span class="hljs-string">&#x27;get_devices&#x27;</span>);
  }

  <span class="hljs-keyword">async</span> <span class="hljs-title function_">startRocket</span>(<span class="hljs-params"></span>) {
    <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">sendMessage</span>(<span class="hljs-string">&#x27;start_rocket&#x27;</span>);
  }

  <span class="hljs-keyword">async</span> <span class="hljs-title function_">scanFoot</span>(<span class="hljs-params">params</span>) {
    <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">sendMessage</span>(<span class="hljs-string">&#x27;scan_foot&#x27;</span>, params);
  }

  <span class="hljs-keyword">async</span> <span class="hljs-title function_">scanFootByFootswitch</span>(<span class="hljs-params">params</span>) {
    <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">sendMessage</span>(<span class="hljs-string">&#x27;scan_foot_by_footswitch&#x27;</span>, params);
  }

  <span class="hljs-keyword">async</span> <span class="hljs-title function_">controlLaser</span>(<span class="hljs-params">state</span>) {
    <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">sendMessage</span>(<span class="hljs-string">&#x27;control_laser&#x27;</span>, { state });
  }

  <span class="hljs-keyword">async</span> <span class="hljs-title function_">getMachineInfo</span>(<span class="hljs-params"></span>) {
    <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">sendMessage</span>(<span class="hljs-string">&#x27;get_machine_info&#x27;</span>);
  }

  <span class="hljs-keyword">async</span> <span class="hljs-title function_">saveFile</span>(<span class="hljs-params"></span>) {
    <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">sendMessage</span>(<span class="hljs-string">&#x27;save_file&#x27;</span>);
  }

  <span class="hljs-keyword">async</span> <span class="hljs-title function_">exitRocket</span>(<span class="hljs-params"></span>) {
    <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">sendMessage</span>(<span class="hljs-string">&#x27;exit_rocket&#x27;</span>);
  }
}
</code></pre>
<h3 id="vue-3-组件示例">Vue 3 组件示例</h3>
<pre><code class="language-vue">&lt;template&gt;
  &lt;div class=&quot;rocket-control&quot;&gt;
    &lt;div class=&quot;status&quot;&gt;
      &lt;span :class=&quot;['status-indicator', { connected: isConnected }]&quot;&gt;
        {{ isConnected ? '已连接' : '未连接' }}
      &lt;/span&gt;
    &lt;/div&gt;

    &lt;div class=&quot;controls&quot;&gt;
      &lt;button @click=&quot;startRocket&quot; :disabled=&quot;!isConnected&quot;&gt;
        启动Rocket
      &lt;/button&gt;
      &lt;button @click=&quot;exitRocket&quot; :disabled=&quot;!isConnected&quot;&gt;
        退出Rocket
      &lt;/button&gt;
    &lt;/div&gt;

    &lt;div class=&quot;scan-form&quot;&gt;
      &lt;h3&gt;扫描设置&lt;/h3&gt;
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;label&gt;脚部:&lt;/label&gt;
        &lt;select v-model=&quot;scanParams.side&quot;&gt;
          &lt;option value=&quot;left&quot;&gt;左脚&lt;/option&gt;
          &lt;option value=&quot;right&quot;&gt;右脚&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;label&gt;名字:&lt;/label&gt;
        &lt;input v-model=&quot;scanParams.firstName&quot; type=&quot;text&quot; /&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;label&gt;姓氏:&lt;/label&gt;
        &lt;input v-model=&quot;scanParams.lastName&quot; type=&quot;text&quot; /&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;label&gt;性别:&lt;/label&gt;
        &lt;select v-model=&quot;scanParams.gender&quot;&gt;
          &lt;option value=&quot;0&quot;&gt;男性&lt;/option&gt;
          &lt;option value=&quot;1&quot;&gt;女性&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;label&gt;密码:&lt;/label&gt;
        &lt;input v-model=&quot;scanParams.password&quot; type=&quot;text&quot; /&gt;
      &lt;/div&gt;
      &lt;button @click=&quot;scanFoot&quot; :disabled=&quot;!isConnected&quot;&gt;
        扫描脚部
      &lt;/button&gt;
      &lt;button @click=&quot;scanFootByFootswitch&quot; :disabled=&quot;!isConnected&quot;&gt;
        脚踏开关扫描
      &lt;/button&gt;
    &lt;/div&gt;

    &lt;div class=&quot;laser-controls&quot;&gt;
      &lt;h3&gt;激光控制&lt;/h3&gt;
      &lt;button @click=&quot;controlLaser(1)&quot; :disabled=&quot;!isConnected&quot;&gt;
        开启激光
      &lt;/button&gt;
      &lt;button @click=&quot;controlLaser(0)&quot; :disabled=&quot;!isConnected&quot;&gt;
        关闭激光
      &lt;/button&gt;
    &lt;/div&gt;

    &lt;div class=&quot;logs&quot;&gt;
      &lt;h3&gt;操作日志&lt;/h3&gt;
      &lt;div v-for=&quot;log in logs&quot; :key=&quot;log.id&quot; :class=&quot;['log-entry', log.type]&quot;&gt;
        {{ log.timestamp }} - {{ log.message }}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  name: 'RocketControl',
  setup() {
    const client = new RocketWebSocketClient();
    const isConnected = ref(false);
    const logs = ref([]);
    const scanParams = ref({
      side: 'left',
      firstName: 'John',
      lastName: 'Doe',
      gender: '0',
      password: '000000000000'
    });

    const addLog = (type, message) =&gt; {
      logs.value.unshift({
        id: Date.now(),
        type,
        timestamp: new Date().toLocaleTimeString(),
        message
      });
    };

    const connect = async () =&gt; {
      try {
        await client.connect();
        isConnected.value = true;
        addLog('info', '连接成功');
      } catch (error) {
        addLog('error', `连接失败: ${error.message}`);
      }
    };

    const startRocket = async () =&gt; {
      try {
        await client.startRocket();
        addLog('success', 'Rocket启动请求已发送');
      } catch (error) {
        addLog('error', `启动失败: ${error.message}`);
      }
    };

    const exitRocket = async () =&gt; {
      try {
        await client.exitRocket();
        addLog('success', 'Rocket退出请求已发送');
      } catch (error) {
        addLog('error', `退出失败: ${error.message}`);
      }
    };

    const scanFoot = async () =&gt; {
      try {
        await client.scanFoot({
          side: scanParams.value.side,
          first_name: scanParams.value.firstName,
          last_name: scanParams.value.lastName,
          gender: parseInt(scanParams.value.gender),
          password: scanParams.value.password
        });
        addLog('success', '脚部扫描请求已发送');
      } catch (error) {
        addLog('error', `扫描失败: ${error.message}`);
      }
    };

    const scanFootByFootswitch = async () =&gt; {
      try {
        await client.scanFootByFootswitch({
          side: scanParams.value.side,
          first_name: scanParams.value.firstName,
          last_name: scanParams.value.lastName,
          gender: parseInt(scanParams.value.gender),
          password: scanParams.value.password
        });
        addLog('success', '脚踏开关扫描请求已发送');
      } catch (error) {
        addLog('error', `扫描失败: ${error.message}`);
      }
    };

    const controlLaser = async (state) =&gt; {
      try {
        await client.controlLaser(state);
        addLog('success', `激光${state === 1 ? '开启' : '关闭'}请求已发送`);
      } catch (error) {
        addLog('error', `激光控制失败: ${error.message}`);
      }
    };

    onMounted(() =&gt; {
      connect();
    });

    onUnmounted(() =&gt; {
      client.disconnect();
    });

    return {
      isConnected,
      logs,
      scanParams,
      startRocket,
      exitRocket,
      scanFoot,
      scanFootByFootswitch,
      controlLaser
    };
  }
};
&lt;/script&gt;

&lt;style scoped&gt;
.rocket-control {
  padding: 20px;
}

.status {
  margin-bottom: 20px;
}

.status-indicator {
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: bold;
}

.status-indicator.connected {
  background-color: #d4edda;
  color: #155724;
}

.status-indicator:not(.connected) {
  background-color: #f8d7da;
  color: #721c24;
}

.controls, .scan-form, .laser-controls {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.form-group {
  margin-bottom: 10px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input, .form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin: 5px;
}

button:hover:not(:disabled) {
  background-color: #0056b3;
}

button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.logs {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
}

.log-entry {
  padding: 5px 0;
  border-bottom: 1px solid #eee;
  font-family: monospace;
  font-size: 12px;
}

.log-entry.success {
  color: #28a745;
}

.log-entry.error {
  color: #dc3545;
}

.log-entry.info {
  color: #17a2b8;
}
&lt;/style&gt;

## 错误处理

### 常见错误

1. **连接错误**
   - 检查服务器是否运行
   - 检查WebSocket地址是否正确
   - 检查防火墙设置

2. **设备不可用**
   - 确保Rocket设备已正确连接
   - 检查设备驱动是否安装
   - 检查设备权限

3. **操作失败**
   - 检查Rocket软件是否已启动
   - 检查设备状态
   - 查看服务器日志

### 错误响应示例

```json
{
  &quot;type&quot;: &quot;error&quot;,
  &quot;success&quot;: false,
  &quot;error&quot;: &quot;设备rocket不可用&quot;
}
</code></pre>
<h2 id="最佳实践">最佳实践</h2>
<ol>
<li>
<p><strong>连接管理</strong></p>
<ul>
<li>实现自动重连机制</li>
<li>处理连接断开情况</li>
<li>添加连接状态监控</li>
</ul>
</li>
<li>
<p><strong>消息处理</strong></p>
<ul>
<li>为每个请求添加唯一ID</li>
<li>实现请求超时机制</li>
<li>添加错误重试逻辑</li>
</ul>
</li>
<li>
<p><strong>用户体验</strong></p>
<ul>
<li>显示操作状态和进度</li>
<li>提供操作反馈</li>
<li>实现操作日志记录</li>
</ul>
</li>
<li>
<p><strong>安全性</strong></p>
<ul>
<li>验证输入参数</li>
<li>限制并发请求数量</li>
<li>添加请求频率限制</li>
</ul>
</li>
</ol>
<h2 id="测试">测试</h2>
<p>可以使用提供的 <code>vue_example.html</code> 文件进行测试：</p>
<ol>
<li>启动WebSocket服务器</li>
<li>在浏览器中打开 <code>vue_example.html</code></li>
<li>测试各种操作功能</li>
</ol>
<h2 id="部署">部署</h2>
<ol>
<li>确保服务器环境满足要求</li>
<li>配置正确的设备路径</li>
<li>设置适当的防火墙规则</li>
<li>配置日志记录</li>
<li>设置错误监控</li>
</ol>

            <script async src="https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js"></script>
            
        </body>
        </html>